<template>
  <div class="row">
    <h2 class="col-md-3">Home~~~</h2>
    <ul class="col-md-3 nav nav-pills nav-stacked">
      <li>
        <router-link to="/home/news" active-class="active">News</router-link>
      </li>
      <li>
        <router-link to="/home/message" active-class="active"
          >Message</router-link
        >
      </li>
    </ul>
    <router-view class="col-md-6" />
  </div>
</template>

<script>
export default {
  name: 'Home',
  mounted() {
    console.log('Home mounted')
  },
  beforeDestroy() {
    console.log('Home beforeDestroy')
  },
  activated() {
    console.log('Home activated')
  },
  deactivated() {
    console.log('Home deactiveted')
  },
}
</script>
